<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2023-09-11 14:43:23
 * @LastEditTime: 2024-05-31 17:02:27
 * @FilePath: \vue-admin-template\src\components\issueInvioce\module\IssueNow.vue
-->
<template>
  <div>
    <el-dialog
      title="立即开票"
      :visible.sync="dialogVisible"
      width="350px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <el-radio-group 
        size="mini"
        fill="#ecf5ff" 
        text-color="#409eff" 
        class="invioceTy" 
        v-model="formInvioce.invioceTy" 
      >
        <el-radio-button label="0"> 电子发票 </el-radio-button>
        <el-radio-button label="1">纸质发票</el-radio-button>
      </el-radio-group> -->
      <div class="invioceTy">
        <el-tag size="medium" v-show="formInvioce.invoiceRed=='Y'" effect="plain">蓝字</el-tag>
        <el-tag size="medium" v-show="formInvioce.invoiceRed=='X'" effect="plain" type="danger">红字</el-tag>
      </div>

      <el-form
        ref="formName"
        label-position="right" 
        label-width="80px" 
        :model="formInvioce"
        :rules="rules"
      >
        <el-form-item 
          label="选择票类" 
          prop="invoiceType"
        >
          <el-select clearable v-model="formInvioce.invoiceType" placeholder="请选择（必填项）">
            <el-option
              v-for="item in invoiceTypes"
              :key="item.value"
              :label="item.label" 
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
          <!-- <el-form-item label="是否红字" prop="invoiceRed">
            <el-select clearable v-model="formInvioce.invoiceRed" placeholder="请选择（必填项）">
              <el-option label="是" :value="'X'"></el-option>
              <el-option label="否" :value="'Y'"></el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="特定业务" prop="Business">
          <el-select disabled clearable v-model="formInvioce.Business" placeholder="请选择（非必填项）">
            <el-option
              v-for="item in speBusiness"
              :key="item.val"
              :label="item.label" 
              :value="item.val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="差额征税" prop="invoiceWay">
          <el-select disabled clearable v-model="formInvioce.vareLevy" placeholder="请选择（非必填项）">
            <el-option label="差额征税-差额开票" :value="0"></el-option>
            <el-option label="差额征税-全额开票" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="减按征税" prop="reduTax">
          <el-select clearable v-model="formInvioce.reduTax" disabled placeholder="请选择（非必填项）">
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleIn">取 消</el-button>
        <el-button type="primary" @click="createIn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'IssueNow',
  data() {
    return {
      dialogVisible: true,
      formInvioce:{
        invoiceType: '', // 选择票类
        // invioceTy: '0', // 电子发票
        Business: '', // 特定业务
        vareLevy: '', // 差额征税
        reduTax: '', // 减按征税
        invoiceBase: '1', // 基准方式
        invoiceWay: '1', // 开票方式
        invoiceRed: 'Y' // 不是红字
      },
      rules: {
        invoiceType: [
          { required: true, message: '请选择票类', trigger: 'blur' }
        ],
        invoiceRed: [
          { required: true, message: '请选择是否红字', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    // 特定业务
    speBusiness() {
      return this.$store.state.speBusiness 
    },
    // 发票类型
    invoiceTypes() {
      return this.$store.state.tpyeInvioceAll
    },
  },
  methods:{
    createIn() {
      this.$refs.formName.validate((valid) => {
        if (!valid) return false
        
        this.$emit('createIn', this.formInvioce)
        this.$parent.butShow(false) // 立即开票 弹窗
        this.dialogVisible = false
      });
    },
    cancleIn() {
      this.$emit('cancleIn')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.invioceTy{
  position: absolute;
  top: 18px;
  left: 110px;
}

::v-deep{
  .el-dialog__body{
    padding: 30px 20px 20px 20px;
  }
}
</style>